This is working fine locally 👍 .

Few things to tweak:
It should be possible to do this with just CSS. The cases in the if statements, can all be inferred purely from the browser size. The exception being the search page, but since that's a different page in hugo, you could set a different class explicitly for that page maybe.

Refactoring to pure css aside, the resize event triggers every pixel change. It shouldn't impact performance when it's only changing classes, but a small debounce function to wrap it in might be no harm, like

function debounce(func, wait = 200) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}

Then wrap what's in you current event listener closure in a function, and call it like window.addEventListener('resize', debounce(updateSearchBarVisibility, 200));

This is working as is, but I'd like to at least add the debounce in before merging. If we do end up adding more logic to resize, it'll start to chug when people resize.
We can come back to refactoring as CSS later, if that sounds alright?